/* vietnamese */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/josefinsans/v17/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjQbMlhLzTs.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/josefinsans/v17/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjQbMhhLzTs.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/josefinsans/v17/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjQbMZhLw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

[v-cloak] {
  display: none;
}

.loading {
  visibility: hidden;
  opacity: 0;
}

body {
  //max-width: 1200px;
  margin: auto;
  //font-family: Roboto, Noto, Helvetica, Arial, sans-serif;

  font-family: Lato, 'Josefin Sans', 'PingFang SC', sans-serif;
  color: #333;

  &.add-mask-panel {
    height: 100%;
    overflow: hidden;
  }

  &::-webkit-scrollbar {
    //width: 6px;
    //height: 6px;
    //background: #ff4e6a;

  }

  &::-webkit-scrollbar-track {
    //background: rgba(0,0,0,.1);
    //border-radius: 3px;

  }

  &::-webkit-scrollbar-thumb {
    //background: #ff4e6a;
    //border-radius: 3px;
  }

  //&::-webkit-scrollbar-corner{
  //
  //}
}

a {
  color: #333;
  text-underline: #333;
}


//html {
//  height: 100%;
//}


img {
  max-width: 100%;
}

input, textarea, button, a, select {
  border: 0;
  margin: 0;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
  appearance: none;
  text-decoration: none;
}


#app {
  //font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

//768 1024 2080

@media screen and (max-width: 1024px) {

  div.right-content {
    width: calc(100% - 280px) !important;
  }

}

@media screen and (min-width: 768px) {
  div.left-content {
    transform: translate(0) !important;
  }
}

@media screen and (max-width: 768px) {

  div.left-content {
    //display: none;
    z-index: 100;
    background: white;
    transform: translate(-260px);

    &.screen-change {
      z-index: 100;
      background: white;
      display: block;
      transform: translate(0) !important;
    }

    .data-time {
      color: black !important;
    }
  }

  div.index {
    &::before {
      display: table;
      content: "";
    }

    div.bg {
      //background: #f4f8fb !important;
      //background: transparent !important;
    }

    #canvas {
      background: #f4f8fb;
    }

    .panel-cont {
      background: rgba(255, 255, 255, .5);
    }
  }

  div.right-content {
    position: relative !important;
    left: 0 !important;
    width: 100% !important;

    .header {
      //display: block !important;
      display: flex !important;
    }

    ul::before {
      display: table;
      content: "";
    }

    ul.article-page li {
      width: 100% !important;
    }

    .footer {
      font-size: 12px;
    }

    .about-page {
      .img-cont {
        margin: 0 20px;
      }

      .tags {
        padding: 0 20px;
      }

      .intro-detail {
        margin: 0 0 20px;
        padding: 20px;
      }
    }
  }

  div.address-page {
    .good-link li.link-item {
      width: 100%;
      margin-right: 0;

      a {
        justify-content: space-between;
      }

      p.intro, p.title {
        max-width: 80%;
      }
    }
  }
}


/* 样式重制 */
.post-page, .main-content-right {

  .code-type {
    position: absolute;
    top: 2px;
    right: 35px;
    color: #bbb;
    display: none;
    transition: all .2s ease-in;
  }

  pre:hover .code-type {
    display: block;
  }

  .vditor-reset h1, .vditor-reset h2 {
    border-bottom: none;
    padding-bottom: 0;
  }

  .highlight-ln {
    user-select: none;
  }


  .vditor-tooltipped {
    position: relative;
    cursor: pointer
  }

  .vditor-reset iframe {
    width: 100%;
  }

  .vditor-tooltipped:after {
    z-index: 1000000;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 400;
    -webkit-font-smoothing: subpixel-antialiased;
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: break-word;
    white-space: pre;
    content: attr(aria-label);
    background: #3b3e43;
    border-radius: 3px;
    line-height: 16px
  }

  .vditor-tooltipped:after,
  .vditor-tooltipped:before {
    position: absolute;
    display: none;
    pointer-events: none;
    opacity: 1
  }

  @media screen and (max-width: 520px) {

    .vditor-tooltipped:after,
    .vditor-tooltipped:before {
      content: none
    }
  }


  .vditor-tooltipped__w:after {
    right: 100%;
    bottom: 50%;
    margin-right: 5px;
    transform: translateY(50%)
  }

  .vditor-tooltipped__w:before {
    top: 50%;
    bottom: 50%;
    left: -5px;
    margin-top: -5px;
    border-left-color: #3b3e43
  }

  .vditor-tooltipped--hover:after,
  .vditor-tooltipped--hover:before,
  .vditor-tooltipped:active:after,
  .vditor-tooltipped:active:before,
  .vditor-tooltipped:focus:after,
  .vditor-tooltipped:focus:before,
  .vditor-tooltipped:hover:after,
  .vditor-tooltipped:hover:before {
    display: inline-block;
    text-decoration: none;
    -webkit-animation-name: tooltip-appear;
    animation-name: tooltip-appear;
    -webkit-animation-duration: .15s;
    animation-duration: .15s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  .vditor-tooltipped:before {
    z-index: 1000001;
    width: 0;
    height: 0;
    color: #3b3e43;
    content: "";
    border: 5px solid transparent
  }


  .vditor .vditor-copy {
    z-index: auto
  }

  .vditor-reset pre:hover div.vditor-copy {
    display: block
  }

  .vditor-copy {
    position: relative;
    display: none;
    z-index: 1
  }

  .vditor-copy textarea {
    position: absolute;
    left: -100000px;
    height: 10px
  }

  .vditor-copy span {
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: .5em
  }

  .vditor-copy svg {
    color: #586069;
    height: 14px;
    width: 14px !important;
    display: block;
    fill: currentColor
  }


  //.hljs {
  //  background: white
  //}

  .vditor-reset {
    font-family: inherit;
  }

  .vditor-reset blockquote {
    padding: 8px 20px;
    background: linear-gradient(90deg, #dceaff, #ededed);
    border-left: 4px solid #70a6ff;
    border-radius: 0 5px 5px 0;
    margin-bottom: 10px;
  }
}

.main-content-right .vditor-reset blockquote {
  padding: 8px 0;
  background: transparent;
  border-left: none;
  border-radius: 0 5px 5px 0;
  margin-bottom: 10px;
}

.vicon .markdown {
  display: none
}
